<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>拖拽排序</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

</head>

<body class="bg-gray">
    <div class="wrapper wrapper-container">
        <div class="row">
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        基本示例
                    </div>
                    <div class="panel-body" style="height: 300px;overflow-y: auto;">
                        <div id="dragbox1" class=" text-white bg-danger padding-10 pull-left" style="width: 100px;height: 100px;">
                            拖拽模块
                        </div>
                        <div id="dragbox2" class="text-white bg-warning padding-10 pull-left" style="width: 100px;height: 100px;">
                            拖拽模块
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        拖拽方向约束
                    </div>
                    <div class="panel-body" style="height: 300px;overflow-y: auto;">
                        <div id="dragbox3" class="text-white  bg-danger padding-10 pull-left"
                            style="width: 100px;height: 100px;">
                            只能在Y方向拖拽
                        </div>
                        <div id="dragbox4" class="text-white bg-warning padding-10 pull-left"
                            style="width: 100px;height: 100px;">
                            只能在X方向拖拽
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        拖拽容器约束
                    </div>
                    <div class="panel-body" id="drag_panel" style="height: 300px;">

                        <div class="mt-10 border-primary" style="height: 150px;">
                            <div id="dragbox5" class="text-white bg-success padding-10 pull-left"
                                style="width: 100px;height: 100px;">
                                只能在父容器中拖拽
                            </div>
                            <div id="dragbox6" class="text-white  bg-primary padding-10 pull-left"
                                style="width: 100px;height: 100px;">
                                我就不一样了，我可以在指定的容器中拖拽
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        指定拖拽模块拖拽整体
                    </div>
                    <div class="panel-body" id="drag_panel2" style="height: 300px;">

                        <div class="mt-10 border-primary" id="dragbox7" style="width: 300px;">
                            <div id="dragbox7_handle" class="text-white bg-primary padding-10 "
                                style="width: 100px;height: 100px;user-select: none;cursor: move;">
                                只有拖我这个区域才能拖动,拖别的地方不好使！
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dragbox1,#dragbox2").draggable();
            $("#dragbox3").draggable({
                axis: 'y'
            });
            $("#dragbox4").draggable({
                axis: 'x'
            });
            $("#dragbox5").draggable({
                containment: 'parent'
            });
            $("#dragbox6").draggable({
                containment: "#drag_panel",
                 scroll: false
            });
            $("#dragbox7").draggable({
                containment: "#drag_panel2",
                 scroll: false,
                 handle:'#dragbox7_handle'
            });
        });
    </script>
</body>

</html>